import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import React, { PureComponent, createElement } from 'react';
import PropTypes from 'prop-types';
import pathToRegexp from 'path-to-regexp';
import { Breadcrumb, Tabs } from 'antd';
import classNames from 'classnames';
import styles from "./index.less?modules";
import { urlToList } from "../_utils/pathTools";
var TabPane = Tabs.TabPane;
export function getBreadcrumb(breadcrumbNameMap, url) {
  var breadcrumb = breadcrumbNameMap[url];

  if (!breadcrumb) {
    Object.keys(breadcrumbNameMap).forEach(function (item) {
      if (pathToRegexp(item).test(url)) {
        breadcrumb = breadcrumbNameMap[item];
      }
    });
  }

  return breadcrumb || {};
}

var PageHeader = /*#__PURE__*/function (_PureComponent) {
  _inherits(PageHeader, _PureComponent);

  var _super = _createSuper(PageHeader);

  function PageHeader() {
    var _this;

    _classCallCheck(this, PageHeader);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = {
      breadcrumb: null
    };

    _this.onChange = function (key) {
      if (_this.props.onTabChange) {
        _this.props.onTabChange(key);
      }
    };

    _this.getBreadcrumbProps = function () {
      return {
        routes: _this.props.routes || _this.context.routes,
        params: _this.props.params || _this.context.params,
        routerLocation: _this.props.location || _this.context.location,
        breadcrumbNameMap: _this.props.breadcrumbNameMap || _this.context.breadcrumbNameMap
      };
    };

    _this.getBreadcrumbDom = function () {
      var breadcrumb = _this.conversionBreadcrumbList();

      _this.setState({
        breadcrumb: breadcrumb
      });
    };

    _this.conversionFromProps = function () {
      var _this$props = _this.props,
          breadcrumbList = _this$props.breadcrumbList,
          breadcrumbSeparator = _this$props.breadcrumbSeparator,
          _this$props$linkEleme = _this$props.linkElement,
          linkElement = _this$props$linkEleme === void 0 ? 'a' : _this$props$linkEleme;
      return /*#__PURE__*/React.createElement(Breadcrumb, {
        className: styles.breadcrumb,
        separator: breadcrumbSeparator
      }, breadcrumbList.map(function (item) {
        return /*#__PURE__*/React.createElement(Breadcrumb.Item, {
          key: item.title
        }, item.href ? createElement(linkElement, _defineProperty({}, linkElement === 'a' ? 'href' : 'to', item.href), item.title) : item.title);
      }));
    };

    _this.conversionFromLocation = function (routerLocation, breadcrumbNameMap) {
      var _this$props2 = _this.props,
          breadcrumbSeparator = _this$props2.breadcrumbSeparator,
          _this$props2$linkElem = _this$props2.linkElement,
          linkElement = _this$props2$linkElem === void 0 ? 'a' : _this$props2$linkElem; // Convert the url to an array

      var pathSnippets = urlToList(routerLocation.pathname); // Loop data mosaic routing

      var extraBreadcrumbItems = pathSnippets.map(function (url, index) {
        var currentBreadcrumb = getBreadcrumb(breadcrumbNameMap, url);
        var isLinkable = index !== pathSnippets.length - 1 && currentBreadcrumb.component;
        return currentBreadcrumb.name && !currentBreadcrumb.hideInBreadcrumb ? /*#__PURE__*/React.createElement(Breadcrumb.Item, {
          key: url
        }, createElement(isLinkable ? linkElement : 'span', _defineProperty({}, linkElement === 'a' ? 'href' : 'to', url), currentBreadcrumb.name)) : null;
      }); // Add home breadcrumbs to your head
      // extraBreadcrumbItems.unshift(
      //   <Breadcrumb.Item key="home">
      //     {createElement(
      //       linkElement,
      //       {
      //         [linkElement === 'a' ? 'href' : 'to']: '/',
      //       },
      //       '首页'
      //     )}
      //   </Breadcrumb.Item>
      // );

      return /*#__PURE__*/React.createElement(Breadcrumb, {
        className: styles.breadcrumb,
        separator: breadcrumbSeparator
      }, extraBreadcrumbItems);
    };

    _this.conversionBreadcrumbList = function () {
      var _this$props3 = _this.props,
          breadcrumbList = _this$props3.breadcrumbList,
          breadcrumbSeparator = _this$props3.breadcrumbSeparator;

      var _this$getBreadcrumbPr = _this.getBreadcrumbProps(),
          routes = _this$getBreadcrumbPr.routes,
          params = _this$getBreadcrumbPr.params,
          routerLocation = _this$getBreadcrumbPr.routerLocation,
          breadcrumbNameMap = _this$getBreadcrumbPr.breadcrumbNameMap;

      if (breadcrumbList && breadcrumbList.length) {
        return _this.conversionFromProps();
      } // 如果传入 routes 和 params 属性
      // If pass routes and params attributes


      if (routes && params) {
        return /*#__PURE__*/React.createElement(Breadcrumb, {
          className: styles.breadcrumb,
          routes: routes.filter(function (route) {
            return route.breadcrumbName;
          }),
          params: params,
          itemRender: _this.itemRender,
          separator: breadcrumbSeparator
        });
      } // 根据 location 生成 面包屑
      // Generate breadcrumbs based on location


      if (routerLocation && routerLocation.pathname) {
        return _this.conversionFromLocation(routerLocation, breadcrumbNameMap);
      }

      return null;
    };

    _this.itemRender = function (route, params, routes, paths) {
      var _this$props$linkEleme2 = _this.props.linkElement,
          linkElement = _this$props$linkEleme2 === void 0 ? 'a' : _this$props$linkEleme2;
      var last = routes.indexOf(route) === routes.length - 1;
      return last || !route.component ? /*#__PURE__*/React.createElement("span", null, route.breadcrumbName) : createElement(linkElement, {
        href: paths.join('/') || '/',
        to: paths.join('/') || '/'
      }, route.breadcrumbName);
    };

    return _this;
  }

  _createClass(PageHeader, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.getBreadcrumbDom();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(preProps) {
      if (preProps.tabActiveKey !== this.props.tabActiveKey) {
        this.getBreadcrumbDom();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          title = _this$props4.title,
          logo = _this$props4.logo,
          action = _this$props4.action,
          content = _this$props4.content,
          extraContent = _this$props4.extraContent,
          tabList = _this$props4.tabList,
          className = _this$props4.className,
          tabActiveKey = _this$props4.tabActiveKey,
          tabDefaultActiveKey = _this$props4.tabDefaultActiveKey,
          tabBarExtraContent = _this$props4.tabBarExtraContent;
      var clsString = classNames(styles.pageHeader, className);
      var activeKeyProps = {};

      if (tabDefaultActiveKey !== undefined) {
        activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
      }

      if (tabActiveKey !== undefined) {
        activeKeyProps.activeKey = tabActiveKey;
      }

      return /*#__PURE__*/React.createElement("div", {
        className: clsString
      }, this.state.breadcrumb, /*#__PURE__*/React.createElement("div", {
        className: styles.detail
      }, logo && /*#__PURE__*/React.createElement("div", {
        className: styles.logo
      }, logo), /*#__PURE__*/React.createElement("div", {
        className: styles.main
      }, /*#__PURE__*/React.createElement("div", {
        className: styles.row
      }, title && /*#__PURE__*/React.createElement("h1", {
        className: styles.title
      }, title), action && /*#__PURE__*/React.createElement("div", {
        className: styles.action
      }, action)), /*#__PURE__*/React.createElement("div", {
        className: styles.row
      }, content && /*#__PURE__*/React.createElement("div", {
        className: styles.content
      }, content), extraContent && /*#__PURE__*/React.createElement("div", {
        className: styles.extraContent
      }, extraContent)))), tabList && tabList.length && /*#__PURE__*/React.createElement(Tabs, Object.assign({
        className: styles.tabs
      }, activeKeyProps, {
        onChange: this.onChange,
        tabBarExtraContent: tabBarExtraContent
      }), tabList.map(function (item) {
        return /*#__PURE__*/React.createElement(TabPane, {
          tab: item.tab,
          key: item.key
        });
      })));
    }
  }]);

  return PageHeader;
}(PureComponent);

PageHeader.contextTypes = {
  routes: PropTypes.array,
  params: PropTypes.object,
  location: PropTypes.object,
  breadcrumbNameMap: PropTypes.object
};
export { PageHeader as default };